<!--
 * @Author: sin998
 * @Date: 2019-06-22 17:34:55
 * @LastEditors: sin998
 * @LastEditTime: 2019-06-22 18:09:06
 -->
<template>
   <div>
   
    <div class="loading">
      <div class="load_button1" >
        <a class="a1" href="javascript:void(0)" @click="tabChange(child1)" >美团账户登录</a>
      </div>
      <div class="load_button2" id="">
      <a class="a2" href="javascript:void(0)" @click="tabChange(child2)" >手机验证登录</a>
      </div>
    
      
     
    </div>
    <!--
      动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。
    -->
    <div :is="currentView"></div>
  </div>
</template>

<script>

 import child1 from './child1';
 import child2 from './child2';

 export default {
   data () {
     return {
       child1: 'child1',
       child2: 'child2',

       currentView: 'child1' // 默认选中第一项
     };
   },
   methods: {
     tabChange(tabItem) {
       this.currentView = tabItem;
     }
   },
   components: {
     child1,
     child2,

   }
 };
</script>

<style scoped>
.load_button1{
  margin-top: .33rem;
  margin-left: 5%;
  margin-right: 5%;
  width: 40%;
  height: .5rem ;
  float: left;
  border-bottom: .1rem solid rgb(107, 217, 250);
}
.load_button2{
  margin-top: .33rem;
  margin-left: 5%;
  margin-right: 5%;
  width: 40%;
  height: .5rem ;
  float: left;
  border-bottom: .1rem solid transparent;
}
.a1{
   color:   rgb(107, 217, 250);
  font-size: .3rem;
  margin-top: rem;
}
.a2{
  font-size: .3rem;
  margin-top: rem;
}
.a:after{
  color:  rgb(125, 237, 252);
}
</style>


